<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单详细</title>
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/message.js}"></script>
</head>
<body>
<div class="ui  top fixed">
    <div class="ui  secondary  pointing borderless massive menu">
        <div class=" header item logo">
            <a href="#"><img th:src="@{/image/logo.png}" alt="logo"></a>
        </div>
        <a th:href="@{/}" class=" item nav-item">
            首页
        </a>
        <a th:href="@{/movieList}" class="item nav-item">
            影片
        </a>
        <a th:href="@{/cinemaList}" class="item nav-item">
            影院
        </a>
        <div class='right menu' th:if="${session.user}==null">
            <a th:href='@{/login}' class='item nav-item'>登录</a>
            <a th:href='@{/register}' class='item right-nav-item'>注册</a>
        </div>

        <div class="right menu" th:unless="${session.user}==null">
            <a th:href='@{/user/personalOrder}' class='item right-nav-item'>欢迎,<span th:text="${session.user.username}"></span>用户</a>
            <a th:href='@{/user/logout}' class='item right-nav-item'>退出</a>
        </div>
    </div>
</div>
<div class=" ui seat_step container">
    <ul>
        <li class="down">1.选择影片，场次</li>
        <li class="down">2.选座，填手机号</li>
        <li class="current">3.确认订单，支付</li>
        <li class="future">4.支付成功，影院取票观影</li>
    </ul>
</div>
<div class="ui container">
    <div class="row seat-tips">
        <div >
            请您确认您的订单信息，并请在15分钟内完成付款，如超时系统将自动释放已选座位。
        </div>
    </div>
    <table class="ui celled table">
        <thead>
        <tr>
            <th>电影</th>
            <th>场次</th>
            <th>票数/座位</th>
            <th>金额小计</th>
            <th>接收电子码的电话号码</th>
        </tr>
        </thead>
        <tbody>
        <td class="td_movie">
            <img width="80" height="120" th:src="@{${film.picture}}">
            <ul>
                <li th:text="${film.name}"></li>
                <li>版本： 原语 3D</li>
                <li>片长： <span th:text="${film.length}"></span>分钟</li>
            </ul>
        </td>
        <td class="td_cinema">
            <div th:text="${cinema.name}"></div>
            <div th:text="${hall.name}"></div>
            <div style="color: red;">   <font th:text="${#dates.format(time.date,'MM月dd日')}"></font>
                <font  th:text="${#dates.format(time.time,'HH:mm')}"></font></div>
        </td>
        <td class="td_seat">
            <div class="count">
                <span th:text="${items.size()}"></span>张
            </div>

            <div th:each="item:${items}" class='item_x_y' th:text="|${item.seatX}排${item.seatY}座|"></div>
        </td>
        <td>
            <div class="money">
                ￥<span th:text="${order.money}"></span>
            </div>
        </td>
        <td class="td_phone">
            <div class="phone_td" th:text="${order.phone}">
            </div>
            <div>
                1.短信可能会被手机软件拦截，请到该软件中查找短信
            </div>
            <div>
                2.若要修改手机号，需要您重新下单
            </div>
        </td>
        </tbody>
    </table>

    <div class="price_info">
        <span class="order-ID" th:text="|订单编号：${order.id}|">订单编号：</span>
        实付款：<span class="M-price" th:text="| ￥${order.money}|"> ￥</span>
    </div>
    <div>
        <a th:href="@{/user/pay/{id}(id=${order.id})}" class="submit-pay">确认订单，立即支付</a>
    </div>

</div>

</body>
</html>